<template>
  <div class="menu-demo">
    <h3 class="title">基本</h3>
    <div>
      <p>
        <d-switch-list v-model="theme" :datas="{'d-menu-white': '白色', 'd-menu-dark': '黑色'}"></d-switch-list>
      </p>
      <p>
        <d-switch v-model="accordion" small>手风琴模式</d-switch>
      </p>
      <p>
        <d-switch v-model="inlineCollapsed" small>收起菜单</d-switch>
      </p>
      <p>
        <d-switch v-model="activeAll" small>所有的都可以选择</d-switch>
      </p>
      <p>
        <button class="d-btn d-btn-s" @click="select('favor2-3')">选中"收藏-2-3"</button>
        <button class="d-btn d-btn-s" @click="select('task1-1')">选中"任务-1"</button>
        <button class="d-btn d-btn-s" @click="select('welcome')">选中"首页"</button>
      </p>
      <div class="bg-gray2-color" v-padding="20">
        <div class="menu-demo-1-vue" :style="{width: inlineCollapsed?'70px':'250px'}">
          <d-menu
            ref="menu"
            :datas="menuData"
            :activeAll="activeAll"
            :className="theme"
            :inlineCollapsed="inlineCollapsed"
            :accordion="accordion"
            @select="triggerSelect"
            @click="triggerClick"
          ></d-menu>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'menuDemo',
  data () {
    return {
      accordion: false,
      inlineCollapsed: false,
      theme: 'd-menu-dark',
      activeAll: false,
      menuData: [
        {
          title: '首页',
          key: 'welcome',
          icon: 'd-icon-home'
        },
        {
          title: '查询',
          key: 'search',
          icon: 'd-icon-search'
        },
        {
          title: '收藏',
          key: 'favor',
          icon: 'd-icon-star',
          count: 100,
          children: [
            {
              title: '收藏-1',
              key: 'favor2-1'
            },
            {
              title: '收藏收藏收藏收藏收藏收藏收藏收藏-2',
              key: 'favor3-2',
              children: [
                {
                  title: '收藏收藏收藏收藏收藏收藏收藏收藏-2-3',
                  key: 'favor2-3'
                },
                {
                  title: '收藏收藏收藏收藏收藏收藏收藏收藏-2-4',
                  key: 'favor3-4'
                }
              ]
            }
          ]
        },
        {
          title: '任务',
          icon: 'd-icon-task',
          key: 'task',
          children: [
            {
              title: 'Baidu',
              icon: 'd-icon-bell',
              key: 'task1-1',
              href: 'http://www.baidu.com',
              nativeLink: true,
              target: '_blank'
            },
            {
              title: '首页',
              icon: 'd-icon-home',
              key: 'task1-2',
              href: { name: 'Home' }
            }
          ]
        }
      ]
    }
  },
  methods: {
    select (key) {
      this.$refs.menu.select(key)
    },
    triggerClick (data) {
      console.log(data)
    },
    triggerSelect (menu) {
      this.$Message.info(`选中${menu.title}`)
    }
  }
}
</script>

<style lang="stylus" scoped>
// .menu-demo
</style>
